<template>
  <div class="main">
    <section>
      <img :src="'https://www.hrycf.com' + cardInfo.picture" alt="" />
      <div class="fontContent">
        <h1>{{ cardInfo.project_name }}</h1>
        <p class="money">
          募资总金额：<span class="info">{{ cardInfo.money }}</span> 元
        </p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    cardInfo: {
      type: Object
    }
  }
};
</script>

<style scoped lang="stylus">
.main {
  padding 0 30px;
  box-sizing border-box
}

section {
  margin-top 20px;
  display flex;
  border 1px solid #d6d6d6;
  box-shadow: 2px 2px 10px #d6d6d6;
  border-radius 15px;
}

section > img {
  width auto
  height 180px;
  border-radius 15px 0 0 15px;
}

.fontContent {
  padding 0 24px;
  width 100%
  flex_content()
  flex_column()
  flex_justify_space()
}

.fontContent > h1{
  margin 20px 0
  line-height 36px
  font-size 28px;
  font-weight 500;
}
  .money{
    margin-bottom 20px
    font-size 24px
    .info{
      color color-primary
    }
  }
</style>
